<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Repository Item Setter</title>

  <script src="../../_libs/raphael-min.2.0.1.js"></script>

  <script src="../../kekule.js?min=false"></script>
  <link rel="stylesheet" type="text/css" href="../../widgets/themes/default/kekule.css" />
  <style>
    .MainWidget
    {
      vertical-align: middle;
      height: 600px;
    }
    .MainWidget textarea
    {
      height: 400px;
    }
  </style>
  <script>
    function fillStructTypes()
    {
      var selBox = Kekule.Widget.getWidgetById('selStructType');
      selBox.setItems([
        {'text': 'Kekule.SubGroup', 'value': Kekule.SubGroup},
        {'text': 'Kekule.Molecule', 'value': Kekule.Molecule}
      ]);
    }
    function getRepObject()
    {
      var structClass = Kekule.Widget.getWidgetById('selStructType').getValue();
      var result = new structClass();
      var composer = Kekule.Widget.getWidgetById('composer');
      var srcObj = composer.exportObjs(Kekule.StructureFragment)[0];
      if (srcObj)
      {
        result.assign(srcObj, false);  // do not copy ids
      }
      var abbr = Kekule.Widget.getWidgetById('editAbbr').getValue();
      if (abbr && result.setAbbr)
      {
        result.setAbbr(abbr);
      }
      var formulaText = Kekule.Widget.getWidgetById('editFormulaText').getValue();
      if (formulaText && result.setFormulaText)
      {
        result.setFormulaText(formulaText);
      }

      // remove render options
      result.setRenderOptions(undefined);

      // translate coords
      result.setCoord2D({'x': 0, 'y': 0});
      var objBox = Kekule.Render.ObjUtils.getContainerBox(result, Kekule.CoordMode.COORD2D, true);

      if (objBox)
      {
        var oldObjCoord = result.getCoordOfMode?
          result.getCoordOfMode(Kekule.CoordMode.COORD2D, true) || {}:
          {};
        var delta = {};
        delta.x = -(objBox.x2 + objBox.x1) / 2;
        delta.y = -(objBox.y2 + objBox.y1) / 2;

        // transform coords of children
        result.beginUpdate();
        try
        {
          for (var i = 0, l = result.getNodeCount(); i < l; ++i)
          {
            var node = result.getNodeAt(i);
            var coord = node.getAbsCoord2D(true);
            coord = Kekule.CoordUtils.add(coord, delta);
            node.setAbsCoord2D(coord);
          }
        }
        finally
        {
          result.endUpdate();
        }
      }
      return result;
    }

    function setAnchorNodes()
    {
      var composer = Kekule.Widget.getWidgetById('composer');
      var selection = composer.getSelection();
      //console.log(selection);
      for (var i = 0, l = selection.length; i < l; ++i)
      {
        var obj = selection[i];
        if (obj.setIsAnchor)
          obj.setIsAnchor(!obj.getIsAnchor());
      }
    }

    function saveRepItemData()
    {
      var repObj = getRepObject();
      var structData = Kekule.IO.saveFormatData(repObj, Kekule.IO.DataFormat.KEKULE_JSON);
      var obj = {};
      var name = Kekule.Widget.getWidgetById('editName').getValue();
      if (name)
        obj.name = name;
      if (repObj instanceof Kekule.SubGroup)
      {
        var inputTexts = Kekule.Widget.getWidgetById('editInputTexts').getValue();
        if (inputTexts)
        {
          inputTexts = inputTexts.split('\n');
          obj.inputTexts = inputTexts;
        }
        else
          obj.inputTexts = [];
        if (repObj.getAbbr())
          Kekule.ArrayUtils.pushUnique(obj.inputTexts, repObj.getAbbr());
        if (repObj.getFormulaText())
          Kekule.ArrayUtils.pushUnique(obj.inputTexts, repObj.getFormulaText());
        if (repObj.getName())
          obj.name = repObj.getName();
      }
      obj.dataFormat = Kekule.IO.DataFormat.KEKULE_JSON;
      obj.structData = structData;
      var textEditor = Kekule.Widget.getWidgetById('textEditor');
      textEditor.setValue(JSON.stringify(obj));
    }

    function init()
    {
      fillStructTypes();
      Kekule.Widget.getWidgetById('btnGetData').on('execute', function(e){
        saveRepItemData();
      });
      Kekule.Widget.getWidgetById('btnSetAnchor').on('execute', function(e){
        setAnchorNodes();
      });
    }
    Kekule.X.domReady(init);
  </script>

</head>
<body>
  <div>
    <button id="btnGetData" data-widget="Kekule.Widget.Button" data-text="Get Data">Get Data</button>
    <button id="btnSetAnchor" data-widget="Kekule.Widget.Button" data-text="Set Anchor(s)">Set Anchor(s)</button>
    <select id="selStructType" data-widget="Kekule.Widget.SelectBox"></select>
    <label>Name:
      <input id="editName" type="text" data-widget="Kekule.Widget.TextBox" />
    </label>
    <label>Abbr:
      <input id="editAbbr" type="text" data-widget="Kekule.Widget.TextBox" />
    </label>
    <label>Formula Text:
      <input id="editFormulaText" type="text" data-widget="Kekule.Widget.TextBox" />
    </label>
    <label>Input Texts:
      <textarea id="editInputTexts" type="text" data-widget="Kekule.Widget.TextArea"></textarea>
    </label>
  </div>
  <div>
    <div class="MainWidget" id="composer" style="width:800px" data-widget="Kekule.Editor.Composer" data-resizable="true"></div>
    <div class="MainWidget" id="textEditor" data-widget="Kekule.Widget.TextEditor" style="width:500px"></div>
  </div>
</body>
</html>